{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "firefox/family/includes/macros.html" import module_tag, browser_border %}

<section id="passwords" class="c-passwords">
  <div class="mzp-l-content mzp-t-content-xl">
    <div class="l-grid">
      {{ module_tag(title='Passwords', anchor='passwords') }}
      <div class="c-content">
        <h3 class="c-subtitle">A quick word about passwords</h3>
        <p>“I’m in!” says the hacker who just crossed saying that phrase off his
          bucket list after he guessed your kid’s pet-name password.</p>
      </div>

      {% call browser_border() %}
        <div class="c-passwords-example">
          <h4 class="c-title-uppercase"><span class="visually-hidden">Example form: </span>Log-in</h4>
          <p class="c-passwords-example-input t-username"><span class="visually-hidden">Example username: </span>nerdzrcool@example.com</p>
          <p data-password-length="long" class="c-passwords-example-input t-password"><span class="visually-hidden">Example password: </span>MrFlounder_Sweats_Clam_Chowder77</p>
          <p data-password-length="short" class="c-passwords-example-input t-password"><span class="visually-hidden">Example password: </span>I_eats_thechowder77</p>
          <p aria-hidden="true" class="c-passwords-example-submit mzp-c-button mzp-t-product">Enter</p>
        </div> <!-- .c-password-example ends -->
      {% endcall %}

      <div class="c-blurb">
        <p><a href="https://support.mozilla.org/kb/how-generate-secure-password-firefox?{{ utm_params }}" rel="external">Generate a secure password</a>
          in Firefox or create a fun, random passphrase instead of a password. Make
          it alphanumeric and at least 12 characters long.</p>
      </div> <!-- .c-blurb ends-->
    </div> <!-- .l-grid ends-->
  </div> <!-- .mzp-l-content ends-->
</section>
